<template>
 <div class="container" >
    <div @click="prantStop">
        <button @click.stop="sonStop">stop</button>
    </div>

    <div>
        <a href="http:\\www.baidu.com" @click.prevent="sonPrevent" target="_blank">prevent</a>
    </div>

    <div @click.capture="prantCapture">
        <button @click="sonCapture">capture</button>
    </div>

    <div @click.self="prantSelf">
        <button @click="sonSelf">self</button>
    </div>

    <div @click.self="prantOnce">
        <button @click.once="sonOnce">once</button>
    </div>
 </div>
</template>
<script>
 export default {
 name: '',
 data: function(){
 return {
 }
 },
 methods:{
    prantStop:function(){
        console.info("prant Stop");
    },
    sonStop:function(){
        console.info("son Stop");
    },
    sonPrevent:function(){
        console.info("son Prevent");
    },
    prantCapture:function(){
        console.info("prant Capture");
    },
    sonCapture:function(){
        console.info("son Capture");
    },
    prantSelf:function(){
        console.info("prant Self");
    },
    sonSelf:function(){
        console.info("son Self");
    },
    prantOnce:function(){
        console.info("prant Once");
    },
    sonOnce:function(){
        console.info("son Once");
    },
 }
 }
</script>
<style>
html,
 body, 
 #app{
 height: 100%;
 }
</style>
<style scoped>
 .container {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 background-color: aliceblue;
 }
 .tr{
 width: 200px;
 flex-basis: 50px;
 display: flex;
 flex-direction: row;
 justify-content: space-between;
 background-color: beige;
 align-items: center;
 }
 .second{
 background-color: aqua;
 }
</style>